<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.lanqiao.guimei.dao.SaleProdDao" %>
<%@ page import="org.apache.commons.lang3.StringUtils" %>
<%@ page import="com.lanqiao.guimei.vo.GoodItem" %>
<%@ page import="com.lanqiao.guimei.vo.Product" %>
<%@ page import="com.lanqiao.guimei.dao.DetailItemDao" %>
<%@ page import="com.lanqiao.guimei.vo.DetailItem" %><%--
  Created by IntelliJ IDEA.
  User: Lu
  Date: 2019/8/15/015
  Time: 17:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    Product goodItem = (Product) session.getAttribute("detail-product");
    request.setAttribute("goodItem",goodItem);
    //Dso.qu
    String prodNo = goodItem.getProdNo();
    DetailItem detailItem = new DetailItemDao().queryByProdNo(prodNo);

    String imgPath = goodItem.getImage();
    //商品标题，商品描述 折扣价 原价 邮费 卖家 场地(saleprod.location) 厂商 分类

    int index = imgPath.indexOf(".")-1;
    String extendName = StringUtils.substringAfter(imgPath,".");
    String startString = imgPath.substring(0, index);
    String[] imgPaths = new String[5];
    for (int i = 0; i < imgPaths.length; i++) {
        imgPaths[i] = startString + (i + 1) + "." + extendName;
    }
    request.setAttribute("imgPaths",imgPaths);
    request.setAttribute("detailItem",detailItem);
    session.setAttribute("saler",detailItem.getSaler());
%>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品详情</title>
    <base href="${pageContext.request.contextPath}/">
    <%--弹窗--%>
    <link rel="stylesheet" href="css/front/sweetalert.css">
    <script type="text/javascript" src="js/front-js/sweetalert.min.js"></script>

    <link rel="stylesheet" href="css/front/header.css">
    <link rel="stylesheet" href="css/bootstrapcss/bootstrap.css">
    <!-- Font Awesome -->
    <link href="css/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <script src="js/jquery-2.2.4.js"></script>
    <script src="js/bootstrap.js"></script>
    <%--放大镜需要的--%>
    <script type="text/javascript" src="js/fangda/js/mzp-packed.js"></script>
    <link href="js/fangda/css/magiczoomplus.css" type="text/css" rel="stylesheet">

    <%--<script src="js/front-js/deatil.js"></script>--%>
    <style>
        .img-xiao img{
            padding-left: 5px;
        }
        .img-xiao img:hover{
            border: 1px solid black;
            border-collapse: collapse;
        }
        .cart-head  a:hover{
            color: #FF5000;
            text-decoration: none;
        }
        .cart-head{
            background-color:ghostwhite;
        }
        .cart-head:hover{
            background-color: gray();
        }

        a:hover{
            text-decoration: none;
        }
    </style>
    <input type="hidden" id="qq" value="${goodItem.prodNo}">

    <script>
        $(function () {
            // console.log($("#qq").val());
            $('.add-car').click(function () {
                $.get('front/product/addToCart.do',{prodNo: $('#qq').val()},function (res) {
                    if (res && res.result) {

                        swal({
                            title: "加入成功!",
                            text: "祝您购物愉快!",
                            type: "success"
                        });

                    }
                },'json');
            });

        });
    </script>
</head>
<body>
<%--导入头部--%>
<div class="container">
    <div class="row">
        <div class="clearfix">
            <div class="col-md-10 col-md-offset-1">
                <jsp:include page="header.jsp"/>
            </div>
        </div>
    </div>
</div>



<div class="container">
    <%--头部购物车结算--%>
    <div class="row col-md-offset-10">

        <a href="front/shopping-cart.jsp"><img src="image/cart8.gif" width="28" height="28" /></a>
        <%--<span><a href="shoppingCart.jsp">去购物车结算</a></span>--%>


    </div>
    <div class="col-md-1 column">
    </div>

    <div class="col-md-10 column">
        <%--放大镜--%>
        <div class="row">
            <div class="col-md-5 ">
                <div class="box" >
                    <div class="t1" >
                        <div id="showArea">
                            <div class="t2" >
                                <a href="${requestScope.imgPaths[0]}" id="zoom1" class="MagicZoom MagicThumb">
                                    <img  src="${requestScope.imgPaths[0]}" id="main_img" class="main_img" style="width:380px; height:450px;" /></a>
                            </div>
                            <div class="img-xiao" style="padding-left: 20px;margin-top: 10px">
                                <c:forEach items="${requestScope.imgPaths}" var="item">
                                    <a href="${item}" rel="zoom1" rev="${item}"><img src="${item}" style="width: 60px;height: 60px;"/></a>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="clear:both;"></div>
            </div>
            <div class="col-md-offset-1"></div>
            <%--购物信息 --%>
            <div class="col-md-6" style="margin-left: 30px">
                <h3 >${detailItem.prodName}</h3>
                <br>
                <%--原价 现价--%>
                <h3><p style="color: #FF0036">￥${detailItem.realPrice} <span style="color: black;font-size: 18px"><del>￥${detailItem.price}</del></span></p></h3>
                <%--<h3><p style="color: #FF0036">￥ 380 <span style="color: black"><h4><del>￥59</del></h4></span></p></h3>--%>
                <hr>
                <p><span style="font-family:verdana;font-size:100%;color:darkgray" >库存</span> ${detailItem.quantity}</p>
                <hr>
                <p><span style="font-family:verdana;font-size:100%;color:darkgray" >浏览量</span> 10086人看过</p>
                <hr>
                <p><span style="font-family:verdana;font-size:100%;color:darkgray">卖家</span>  ${detailItem.salerName}</p>
                <hr>
                <p><span style="font-family:verdana;font-size:100%;color:darkgray">运费</span>  ${detailItem.carriage}</p>
                <hr>
                <p><span style="font-family:verdana;font-size:100%;color:darkgray">服务</span>  质量保证  |   闪电发货 |  本商品支持7天无条件退货</p></dt>
                <br>
                <br>
                <div class="row">
                    <a href="javascript:"class="btn" style="width: 125px;height: 43px;text-align: center;color: red;background-color:#FFEDED;font-size: 18px;margin-left: 20px">立即购买</a>
                    <button class="btn add-car" style="width: 120px;height: 40px;text-align: center;color: white;background-color:#FF0036;font-size: 18px;margin-left: 20px">加入购物车</button>
                </div>
            </div>
        </div>
        <%--商品介绍--%>
        <div class="row" style="margin-top: 20px">
            <div style="width:100%;height:40px; border:1px solid #ffffff; background-color: #f5f5f5;">
                <div class="deal_nav" style="">
                        <p style="text-align: center;padding-top: 8px;font-size: 18px">商品介绍</p>
                </div>
            </div>
        </div>
        <br>
        <p style="font: 25px 'Microsoft YaHei UI'">商品介绍 &nbsp;<span style="color:#c1cdcd"> PRODUCT INTRODUCTION</span></p>
        <hr>
        <p class="col-md-offset-1"> ${detailItem.descr}</p>
        <br>
        <br>
            <%--商品参数--%>
            <div class="row" style="margin-top: 20px">
                <div style="width:100%;height:40px; border:1px solid #ffffff; background-color: #f5f5f5;">
                    <div class="deal_nav" style="">
                        <p style="text-align: center;padding-top: 8px;font-size: 18px">商品参数 </p>
                    </div>
                </div>
            </div>
        <br>
        <p style="font: 25px 'Microsoft YaHei UI'">商品参数 &nbsp;<span style="color:#c1cdcd"> PRODUCT PARAMETERS</span></p>
        <hr>
        <div class="row">
            <div class="col-md-5">
                <div class="col-md-offset-3">
                    <br>
                    <p>商品名称 &nbsp; &nbsp; ${detailItem.prodName}</p>
                    <br>
                    <p>分&nbsp; &nbsp; &nbsp; &nbsp; 类&nbsp; &nbsp;  ${detailItem.ctgrName}</p>
                    <br>
                    <p>厂&nbsp; &nbsp; &nbsp; &nbsp; 商  &nbsp; &nbsp; ${detailItem.venName}</p>
                    <br>
                    <p>产&nbsp; &nbsp; &nbsp; &nbsp; 地 &nbsp; &nbsp; ${detailItem.location}</p>
                    <br>
                    <p>退货政策 &nbsp; &nbsp; 本商品支持7天无条件退货</p>
                    <br>
                    <p>换货政策 &nbsp; &nbsp; 本商品不支持换货</p>
                </div>
            </div>
            <%--参数图片--%>
            <div class="col-md-5">
                <div class="col-md-offset-3">
                    <img src="${requestScope.imgPaths[0]}"  style="width: 350px;height: 350px;"/></a>
                </div>
            </div>
        </div>
    </div>
        <jsp:include page="footer.jsp"/>
        <div class="col-md-1 column" style="margin-top: 10px">
    </div>
</div>
<%--<div class="row">--%>
    <%----%>
    <%--<jsp:include page="footer.jsp"></jsp:include>--%>
<%--</div>--%>
</div>
<%--导入尾部--%>

<script type="text/javascript" src="js/fangda/js/lrtk.js"></script>
</body>


</html>
